<template>
  <el-dialog title="新增资源" :visible.sync="visible" :before-close="closeDialogue" width="45%">
    <el-form :model="formData">
            <el-form-item label="资源名称：" :label-width='itemWidth'>
              <el-input v-model="formData.name" autocomplete="off" required="true" :style="inputWidth"></el-input>
            </el-form-item>
            <el-form-item label="二维码名称：" :label-width='itemWidth'>
              <el-input v-model="formData.qrCodeName" autocomplete="off" :style="inputWidth"></el-input>
            </el-form-item>
            <el-form-item label="文件类型：" :label-width='itemWidth'>
              <div>{{formData.resourceSuffix}}</div>
            </el-form-item>
            <el-form-item label="多媒体文件：" :label-width='itemWidth'>
              <jdldUpload class="upload-template"
                :onSuccess="uploadResourceSuccess"
                :minSize="50"
                :chunkSize="10"
                :isMulti="true"
                :onProgress="uploadProgress"
                >
                <el-button type="success" size="small" >上传文件</el-button>
              </jdldUpload>
            </el-form-item>
            <el-form-item label="" v-for="(item, index) in progressItemArr" :key="index" :label-width='itemWidth'>
              <span :title="item.originName">{{item.originName}}</span><span @click="removeFile(item)" style="margin-left:15px;color:#57c5b3;cursor:pointer;">删除</span><br>
              <el-progress :percentage="item.percent" ></el-progress>
            </el-form-item>
            <el-form-item label="资源所在目录：" :label-width='itemWidth'>
              <TreeSelect :data="cateSelectTreeData" :height="selectHeight"
                          :defaultProps="defaultProps"
                          :nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys" :selectedDefaultData="selectCateName"
                          @popoverHide="popoverHide"></TreeSelect>
            </el-form-item>
            <el-form-item label="封    面：" :label-width='itemWidth'>
              <!-- <div v-if="disabled" style="width:148px;height:148px;float:left;margin-right:5px">
                 <div><img :src="imgUrl" width="148px" height="128px" alt=""></div>
                 <div @click="removeImg()" style="cursor:pointer;text-align:center;line-height:18px;color:#57c5b3;font-size:12">删 除</div>
               </div>-->
              <jdldUpload class="upload-template"
                :isShowUploadBtn = "imgIsShowUploadBtn"
                :onSuccess="uploadImgSuccess"
                :minSize="50"
                :chunkSize="10"
                :listType="listType"
                :isMulti="false"
                :limit="1"
                :show-file-list="true"
                :file-list="fileImgList"
                :before-remove="handleImgRemove">
                <i class="el-icon-plus"></i>
              </jdldUpload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="add()" >确 定</el-button>
          </div>
  </el-dialog>
</template>

<script>
  import jdldUpload from "../upload/upload";
  import TreeSelect from "./tree-select";
  export default {
    name: "InputDialog",
    components: { TreeSelect ,jdldUpload},
    data() {
      return {
        visible: false,
        itemWidth:'160px',
        inputWidth:'width:400px;',
        listType:'picture-card',
        formData: {},
        progressItemArr:[],
        fileImgList:[],
        imgIsShowUploadBtn: true,
        defaultProps: {
          children: 'childrenList',
          label: 'menuName'
        },
        nodeKey: 'menuId',
        defaultCheckedKeys: [],
        selectHeight:300,
        categoryId:'',
        selectCateName:'',
      }
    },
    mounted(){
      this.categoryId = this.cateId
    },
    props: {
      cateId: {
        type: String,
        default: '',
      },
      bookId: {
        type: String,
        default: '',
      },
      cateSelectTreeData:{
        type: Array,
        default: '',
      },
    },
    methods: {
      popoverHide (checkedIds, checkedData) {
        this.categoryId = checkedIds;
      },
      add(){
        const loading = this.$loading({
          lock: true,
          text: '保存中...'
        });
        let param = JSON.parse(JSON.stringify(this.formData))
        param.bookId=this.bookId;
        param.cateId=this.categoryId;
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/addResource", param)
        .then(() => {
          this.$emit('get-resource-data');
          loading.close();
        }).catch((error) => {
          loading.close();
          console.error(error)
        })
        this.closeDialogue();
      },
      cancel(){
        this.closeDialogue();
      },
      closeDialogue(){
        this.selectCateName=''
        this.visible = false
        this.formData={}
        this.fileImgList=[]
        this.imgIsShowUploadBtn=true
        this.progressItemArr=[]
      },
      uploadResourceSuccess(resp){
        console.log(resp)
        this.formData.path=resp.url;
        let originName = resp.originName;
        this.formData.fileName=originName;
        this.formData.resourceSuffix = originName.substring(originName.lastIndexOf('.') + 1).toLowerCase();
      },
      uploadImgSuccess(resp){
        this.imgIsShowUploadBtn=false
        this.formData.imgPath=resp.url;
        this.fileImgList = [{url: CONST.ENV.RESOURCE_SERVER_URL+resp.url}]
      },
      handleImgRemove(file, fileList) {
        if (file && file.status === "success") {
          return this.$confirm('确认删除此图片？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.imgIsShowUploadBtn=true
            this.fileImgList = [];
            this.formData.imgPath = '';
          }).catch(() => {
            reject(false);
          });
        }
      },
      uploadProgress(resp){
        let temp = {}
        for(let i=0;i<this.progressItemArr.length;i++){
          let item = this.progressItemArr[i]
          if(item.id==resp.id){
            temp = item
          }
        }
        if(temp.id){
          temp.percent=Number(resp.percent)
        }else{
          let item = {id:resp.id,percent:Number(resp.percent),originName:resp.originName}
          this.progressItemArr=[]
          this.progressItemArr.push(item)
        }
      },
      removeFile(){
        this.formData.path=''
        this.formData.fileName=''
        this.progressItemArr=[]
      },
      /*removeImg(){
        this.imgUrl=''
        this.formData.imgPath=''
        this.disabled=false
      },*/
    }
  }
</script>

<style scoped>
</style>
